<template>
    <div class="box">
        <div class="map" id="container">

        </div>
        <div class="mapclass" v-if="flag">
            <div>
                <div class="backxingxi">单车信息</div>
                <div @click="flag=false" style="float: right;width: 17px;height: 17px;">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="center">
                <div style="margin: 0 2% 0 2%;">
                    <div class="bikeType">
                        <span> 单车状态:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div :class="updatebikeData.bikeType == '空闲中' ? 'biketypes1' : updatebikeData.bikeType == '租借中' ? 'biketypes2' : 'biketypes3'"
                            style="display: inline-block;width: 80px;height: 25px; color: #fff;border-radius: 15px;">
                            {{updatebikeData.bikeType}}</div>
                    </div>
                    <div>
                        <el-button v-if="loading" class="riding" @click="riding" type="warning">开锁</el-button>
                        <el-button v-if="!loading" class="riding2" type="warning">骑行中...&nbsp;&nbsp;&nbsp;&nbsp;<span
                                style="color: #ee0a2485;">{{Locktime}}</span> </el-button>
                        <el-button v-if="!loading" class="riding3" @click="endriding" type="warning">关锁</el-button>
                    </div>
                </div>
            </div>
            <div class="buttom">
                <div @click="drawers" style="display: inline-block;margin:5% 5% 0 2% ;cursor: pointer;"><i
                        class="el-icon-eleme"></i>计价规则</div>
                <div @click="dialogVisible=true"
                    style="display: inline-block;margin:5% 0 0 0;float: right;cursor: pointer;"><i
                        class="el-icon-s-tools"></i>发现坏车</div>
            </div>
            <el-dialog title="坏车信息填写" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
                style="margin-top: 5vh">
                <el-descriptions title="" direction="horizontal" :column="1" border :contentStyle="rowCenter"
                    :labelStyle="rowCenter">
                    <el-descriptions-item label="故障类型">
                        <el-input v-model="breakBikeData.breakType" autocomplete="off"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="故障车图片">
                        <el-avatar class="the_img" v-if="this.breakBikeData.bikepic" shape="square"
                            :src="breakBikeData.bikepic">
                        </el-avatar>
                        <el-avatar class="the_img" v-else shape="square"></el-avatar>
                        <input type="file" accept="image/*" style="display: none" ref="iptRef" @change="onFileChange" />
                        <div class="btn-box">
                            <el-button type="primary" @click="chooseImg">上传图片</el-button>
                        </div>
                    </el-descriptions-item>
                </el-descriptions>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="showbreakbike">确定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="mapclass" v-if="endflag">
            <div>
                <div class="backxingxi">骑行结束</div>
                <div @click="endflag=false" style="float: right;width: 17px;height: 17px;">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="center">
                <div style="margin: 0 2% 0 2%;">
                    <div class="startTime">
                        <span> 用时:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div
                            style="display: inline-block;width: 80px;height: 25px; color: #fff;background-color: #409eff;border-radius: 15px;">
                            {{allTime}}</div>
                    </div>
                    <div class="startTime">
                        <span> 费用:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div
                            style="display: inline-block;width: 80px;height: 25px; color: #fff;background-color: #409eff;border-radius: 15px;">
                            {{timeData.endmoney }} 元 </div>
                    </div>
                    <!-- <el-button class="startpay" @click="waitpay" type="warning">稍后支付</el-button>
                    <el-button class="startpay" @click="nowriding" type="warning">立即支付</el-button> -->
                </div>
            </div>
            <div class="buttom">
                <div @click="drawers" style="display: inline-block;margin:5% 5% 0 2% ;cursor: pointer;"><i
                        class="el-icon-eleme"></i>计价规则</div>
            </div>
        </div>
        <el-drawer title="单车计价规则" :visible.sync="drawer" direction="ltr" style="width: 60%;">
            <div style="margin: 1% 10% 0 10%;">
                <div style="margin-bottom: 8%;">默认配置</div>
                <div style="border-radius: 5px;
                background-color: #c0c4cc6b;
                padding: 1% 0 1% 5%;
                margin-bottom: 1px;
                font-size: 12px;">
                    <div style="height: 30px; line-height: 30px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label
                            for="">起步价</label>:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-divider direction="vertical"></el-divider>
                        <span>1元/5分钟</span>
                    </div>

                </div>
                <!-- <el-divider></el-divider> -->
                <div style="border-radius: 5px;
                background-color: #c0c4cc6b;
                padding: 1% 0 1% 5%;
                font-size: 12px;">
                    <div style="height: 30px; line-height: 30px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label
                            for="">时长费</label>:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-divider direction="vertical"></el-divider>
                        <span>1元/5分钟</span>
                    </div>
                </div>
                <div style="margin: 15% 0 5% 0">
                    说明
                </div>
                <div style="font-size: 12px;">本计价规则适用于单车（非电单车）全部车型，适用于当前定位区域；
                    骑行费用计算以开锁时刻所对应的计价规则为准，时长费不足1个计费周期时，按1个计费周期计算费用；
                    若您持有单车骑行卡，则可免除骑行费用，具体抵扣规则以骑行卡使用规则为准。</div>
            </div>
        </el-drawer>
        <el-dialog title="提示" :visible.sync="notmoney" width="30%" style="margin-top: 25vh;">
            <span>余额不足，请前往充值中心充值！</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="notmoney = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import {
        bikeDataAPI, updatedBikeAPI, updateMoneydAPI, addrecordAPI,
        updaterecordAPI, getrecordAPI, getvipIdAPI, deletevipIdAPI, breakBikeAPI
    } from "@/api";
    import toumingbick from '../../assets/bike1.png'
    export default {
        data() {
            return {
                updatemaptimer: '',
                inittimer: '',
                breakBikeData: {
                    bikeType: '损坏',
                    bikeId: '',
                    bikepic: '',
                    breakType: ''
                },
                nowTime: '',//用作于会员到期时间比较
                vipEndTime: '',//会员到期时间
                statusData: '',//0有会员，1没有会员
                statustype: 0,
                recordData: [],
                bikeData: [],
                notmoney: false,
                addrecordData: {
                    ids: '',
                    id: '',
                    bikeId: '',
                    name: '',
                    startTime: '',
                    rentalType: '',
                    paymentStatus: '',
                    endTime: '',
                    rentalMoney: '',
                },
                timeData: {
                    id: '',
                    money: '', //余额
                    endmoney: '',//消费金额
                    paytype: '',//支付状态
                },
                updatebikeData: {
                    bikeId: '',
                    bikeType: '',
                    startTime: '',
                    endTime: '',
                },
                allTime: '0',//骑行时长
                endflag: false,//骑行结束
                Locktime: '0:0:0',
                timeAlarmTWO: null,
                hour: 0,
                minute: 0,
                second: 0,
                h: '',
                m: '',
                s: '',
                reckon: true,
                endtimer: '',
                viptimer: '', //判断是否为会员计时器
                decideviptimer: '',//删除计时器
                paytimer: '', //支付定时器
                loading: true,//骑行
                types: '',
                imageUrl: '',
                dialogVisible: false,//发现坏车
                drawer: false,//计价规则
                rowCenter: {
                    "text-align": "center"
                },
                flag: false,
            }
        },
        created() {
            this.decideifvip()
            this.getvipId()
            this.deletevipId()
            this.ifvip()
            this.getbikeData()

            if (this.$store.state.userInfo.money == '' || this.$store.state.userInfo.money == null) {
                this.timeData.money = 0
            } else {
                this.timeData.money = this.$store.state.userInfo.money
            }
            this.inittimer = setTimeout(() => {
                this.getlocation()
            }, 1000)
        },
        mounted() {

        },
        beforeDestroy() {
            clearInterval(this.endtimer);
            if (this.reckon) {
                clearInterval(this.reckon);
            }
            clearInterval(this.viptimer);
            clearInterval(this.decideviptimer);
            clearInterval(this.paytimer);
            clearInterval(this.inittimer);
            if (this.updatemaptimer) {
                clearInterval(this.updatemaptimer);
            }

        },
        methods: {
            async showbreakbike() {
                // 5. 调用接口, 传递给后台并根据返回结果给用户提示
                const { data: res } = await breakBikeAPI(this.breakBikeData)
                if (res.status == 0) {
                    this.$message.success('更新单车信息成功！')

                    this.getbikeData()
                    this.updatemaptimer = setTimeout(() => {
                        this.getlocation()
                    }, 1000)
                    this.dialogVisible = false
                    this.flag = false
                } else {
                    this.$message.error('更新单车信息失败！')
                }
                console.log(res)
            },
            // 选择图片->点击事件->让选择框出现
            chooseImg() {
                // 模拟点击行为
                this.$refs.iptRef.click()
            },
            // 在选择框中选择图片后触发的改变事件
            onFileChange(e) {
                // 获取用户选择的文件列表（伪数组）
                const files = e.target.files
                if (files.length === 0) {
                    // 没有选择图片
                    this.breakBikeData.bikepic = ''
                } else {
                    // 选择了图片
                    // 1. 创建 FileReader 对象
                    const fr = new FileReader()
                    // 2. 调用 readAsDataURL 函数，读取文件内容
                    fr.readAsDataURL(files[0])
                    // 3. 监听 fr 的 onload 事件
                    fr.onload = async e => {
                        // 4. 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
                        this.breakBikeData.bikepic = e.target.result
                        console.log(this.breakBikeData)
                    }
                }
            },
            //每隔60秒执行一次判断是否是会员
            ifvip() {
                this.viptimer = setInterval(() => {
                    this.getvipId()
                }, 60000)
            },
            //每隔61秒执行一次判断会员是否过期
            decideifvip() {
                this.decideviptimer = setInterval(() => {
                    this.deletevipId()
                }, 61000)
            },
            //删除会员
            async deletevipId() {
                let timeDate = new Date();
                let year = timeDate.getFullYear();
                let mounth = timeDate.getMonth() + 1;
                mounth = mounth >= 10 ? mounth : "0" + mounth;
                let day = timeDate.getDate();
                day = day >= 10 ? day : "0" + day;
                let hours = timeDate.getHours();
                hours = hours >= 10 ? hours : "0" + hours;
                let minutes = timeDate.getMinutes();
                minutes = minutes >= 10 ? minutes : "0" + minutes;
                let seconds = timeDate.getSeconds();
                seconds = seconds >= 10 ? seconds : "0" + seconds;
                this.nowTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
                //比较两个日期大小。格式：2018-8-12 12:30
                let date1 = new Date(Date.parse(this.nowTime))
                let date2 = new Date(Date.parse(this.vipEndTime))
                if (this.statusData == 0) {
                    if (date1 > date2) {
                        var id = this.$store.state.userInfo.id
                        const { data: res } = await deletevipIdAPI(id)
                        this.$emit('deletevip', '会员过期')
                    }
                }
            },
            // 根据id获取会员信息
            async getvipId() {
                var id = this.$store.state.userInfo.id
                const { data: res } = await getvipIdAPI(id)
                if (res.status == 0) {
                    this.vipEndTime = res.data.memberEndTime
                }
                this.statusData = res.status
            },
            //所有租借记录
            async getRecord() {
                const { data: res } = await getrecordAPI()
                if (res.status === 0) {
                    this.addrecordData.ids = res.data[res.data.length - 1].ids
                }
            },
            //更新租借记录
            async updaterecord() {
                this.addrecordData.rentalType = '已归还'
                this.addrecordData.rentalMoney = this.timeData.endmoney
                this.addrecordData.endTime = this.updatebikeData.endTime
                const { data: res } = await updaterecordAPI(this.addrecordData)
                if (res.status === 0) {
                }
            },
            //新增租借记录
            async addRecord() {
                this.addrecordData.id = this.$store.state.userInfo.id
                this.addrecordData.name = this.$store.state.userInfo.name
                const { data: res } = await addrecordAPI(this.addrecordData)
                if (res.status === 0) {
                }
            },
            //更新用户余额
            async updateMoney() {
                this.timeData.id = this.$store.state.userInfo.id
                const { data: res } = await updateMoneydAPI(this.timeData)
                if (res.status === 0) {
                }
            },
            //获取所有单车信息
            async getbikeData() {
                const { data: res } = await bikeDataAPI();
                this.bikeData = res.data
            },
            //更新单车开始时间信息
            async updatebike() {
                const { data: res } = await updatedBikeAPI(this.updatebikeData)
                if (res.status === 0) {
                    this.getbikeData()
                }
            },
            drawers() {
                this.drawer = true
            },
            //支付
            nowriding() {
                this.getvipId()
                this.paytimer = setTimeout(() => {
                    if (this.statusData == 0) {
                        if (this.timeData.endmoney > 6) {
                            this.timeData.money = this.timeData.money - (this.timeData.endmoney - 6)
                            this.updateMoney()
                            this.$message({
                                showClose: true,
                                message: '支付成功',
                                type: 'success',
                                offset: 60
                            });
                            this.$emit('usermoney', this.timeData.money)
                            this.Locktime = '0:0:0'
                            this.addrecordData.paymentStatus = '已支付'
                            this.loading = true
                            this.endflag = false
                            this.updaterecord()
                        } else {
                            this.$message({
                                showClose: true,
                                message: '会员支付成功',
                                type: 'success',
                                offset: 60
                            });
                            this.Locktime = '0:0:0'
                            this.addrecordData.paymentStatus = '已支付'
                            this.loading = true
                            this.endflag = false
                            this.updaterecord()
                        }
                    } else {
                        if (this.timeData.money < this.timeData.endmoney) {
                            this.notmoney = true
                            this.Locktime = '0:0:0'
                            this.loading = true
                            this.endflag = false
                            this.addrecordData.paymentStatus = '未支付'
                        } else {
                            this.timeData.money = this.timeData.money - this.timeData.endmoney
                            this.$message({
                                showClose: true,
                                message: '支付成功',
                                type: 'success',
                                offset: 60
                            });
                            this.updateMoney()
                            this.$emit('usermoney', this.timeData.money)
                            this.Locktime = '0:0:0'
                            this.addrecordData.paymentStatus = '已支付'
                            this.loading = true
                            this.endflag = false
                        }
                        this.updaterecord()
                    }
                }, 1000)
            },

            // //稍后支付
            waitpay() {
                this.updatebikeData.bikeType = '空闲中'
                this.Locktime = '0:0:0'
                this.loading = true
                this.endflag = false
                this.timeData.paytype = '未支付'
            },
            //结束骑行
            endriding() {
                this.getRecord()
                clearInterval(this.reckon);
                this.second = 0
                let timeDate = new Date();
                let year = timeDate.getFullYear();
                let mounth = timeDate.getMonth() + 1;
                let day = timeDate.getDate();
                let hours = timeDate.getHours();
                hours = hours >= 10 ? hours : "0" + hours;
                let minutes = timeDate.getMinutes();
                minutes = minutes >= 10 ? minutes : "0" + minutes;
                let seconds = timeDate.getSeconds();
                seconds = seconds >= 10 ? seconds : "0" + seconds;
                this.updatebikeData.endTime = `${year}/${mounth}/${day} ${hours}:${minutes}:${seconds}`
                this.updatebikeData.bikeType = '空闲中'
                this.updatebike()
                if (this.h == 0 && this.m !== 0) {
                    this.allTime = this.m + '分' + this.s + '秒'
                    if (this.s == 0) {
                        if (this.m <= 5) {
                            this.timeData.endmoney = 1
                        } else {
                            var m1 = Math.ceil((this.m - 5) / 5);
                            this.timeData.endmoney = 1 + m1
                        }
                    } else {
                        this.timeData.endmoney = 1 + Math.ceil((this.m - 4) / 5)
                    }
                } else if (this.h == '00' && this.m == '00' && this.s !== '00') {
                    this.allTime = this.s + '秒'
                    this.timeData.endmoney = 1
                } else {
                    this.allTime = this.h + '时' + this.m + '分' + this.s + '秒'
                    if (this.s !== 0) {
                        this.timeData.endmoney = 1 + (this.h * 60) / 5 + Math.ceil((this.m - 4) / 5)
                    } else {
                        this.timeData.endmoney = 1 + (this.h * 60) / 5 + Math.ceil(this.m / 5)
                    }
                }
                this.flag = false
                this.endflag = true
                setTimeout(() => {
                    this.nowriding()
                }, 1000)
            },
            timer() {
                this.second++;
                if (this.second >= 60) {
                    this.second = 0;
                    this.minute = this.minute + 1;
                }
                if (this.minute >= 60) {
                    this.minute = 0;
                    this.hour = this.hour + 1;
                }
                let h = this.hour
                let m = this.minute
                let s = this.second
                this.Locktime = h + ":" + m + ":" + s;
                this.h = h
                this.m = m
                this.s = s
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => { });
            },
            //骑行
            async riding() {
                this.statustype = 0
                this.getbikeData()
                const { data: res } = await getrecordAPI()
                if (res.status === 0) {
                    res.data.forEach(item => {
                        if (item.name == this.$store.state.userInfo.name) {
                            this.recordData.push(item)
                        }
                    });
                    this.recordData.forEach(item => {
                        if (item.paymentStatus == '未支付') {
                            this.statustype = 1
                        }
                    })
                }
                if (this.statustype == 1) {
                    this.$message({
                        showClose: true,
                        message: '您有未支付的租借记录，请支付后再骑行！',
                        type: 'error',
                        offset: 100
                    });
                }
                else if (this.updatebikeData.bikeType == '损坏') {
                    this.$message({
                        showClose: true,
                        message: '单车已损坏！',
                        type: 'error',
                        offset: 100
                    });
                } else if (this.updatebikeData.bikeType == '租借中') {
                    this.$message({
                        showClose: true,
                        message: '单车已被他人租借！',
                        type: 'warning',
                        offset: 100
                    });
                } else if (this.updatebikeData.bikeType == '维修中') {
                    this.$message({
                        showClose: true,
                        message: '单车正在维修中！',
                        type: 'warning',
                        offset: 100
                    });
                } else {
                    let timeDate = new Date();
                    let year = timeDate.getFullYear();
                    let mounth = timeDate.getMonth() + 1;
                    let day = timeDate.getDate();
                    let hours = timeDate.getHours();
                    hours = hours >= 10 ? hours : "0" + hours;
                    let minutes = timeDate.getMinutes();
                    minutes = minutes >= 10 ? minutes : "0" + minutes;
                    let seconds = timeDate.getSeconds();
                    seconds = seconds >= 10 ? seconds : "0" + seconds;
                    this.updatebikeData.startTime = `${year}/${mounth}/${day} ${hours}:${minutes}:${seconds}`
                    this.updatebikeData.bikeType = '租借中'
                    this.updatebikeData.endTime = '-'

                    this.addrecordData.rentalType = '租借中'
                    this.addrecordData.paymentStatus = '待支付'
                    this.addrecordData.startTime = `${year}/${mounth}/${day} ${hours}:${minutes}:${seconds}`
                    this.addRecord()
                    this.updatebike()
                    this.loading = false
                    this.endtimer = this.reckon = setInterval(() => {
                        this.timer()
                    }, 1000)
                    // this.flag = false
                }

            },
            addMarker(map, point, data) {  // 创建图标对象  
                var myIcon = new BMap.Icon(toumingbick, new BMap.Size(23, 25), {
                    anchor: new BMap.Size(10, 25),
                });
                var self = this
                // 创建标注对象并添加到地图   
                var marker = new BMap.Marker(point, { icon: myIcon });
                map.addOverlay(marker);

                //单车点击事件
                marker.addEventListener("click", function (e) {
                    self.flag = true
                    self.updatebikeData.bikeType = data.bikeType
                    self.updatebikeData.bikeId = data.bikeId
                    self.addrecordData.bikeId = data.bikeId
                    self.breakBikeData.bikeId = data.bikeId
                })
            },
            getlocation() {
                var map = new BMap.Map("container");
                var point = new BMap.Point(101.72, 26.58);
                //定位
                var self = this
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function (r) {
                    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                        // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
                        // point = new BMap.Point(r.point.lng, r.point.lat);
                        point = new BMap.Point(101.732, 26.573);
                    }
                    else {
                        alert('failed' + this.getStatus());
                    }
                    map.centerAndZoom(point, 17);
                    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                    var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
                    map.addControl(scaleCtrl);

                    //点击查看位置
                    map.addEventListener('click', function (e) {
                        // console.log('点击位置经纬度：' + e.Cg.lng + ',' + e.Cg.lat)
                        // alert('点击位置经纬度：' + e.Cg.lng + ',' + e.Cg.lat);
                    });
                    for (let i = 0; i < self.bikeData.length; i++) {
                        let point = new BMap.Point(self.bikeData[i].lng, self.bikeData[i].lat);
                        self.addMarker(map, point, self.bikeData[i])
                    }
                    // 子向父传参，加载界面
                    var value = false
                    self.$emit('addTodo', value)
                    // self.addMarker(map, point)
                }, { enableHighAccuracy: true });
            },
        }
    }
</script>
<style scoped>
    /deep/ .el-dialog__footer {
        padding: 10px 20px 10px;
        text-align: right;
        box-sizing: border-box;
    }

    .btn-box {
        /* margin-top: 10px; */
        text-align: center;
    }

    .the_img {
        width: 250px;
        height: 250px;
        /* margin-left: 50px; */
    }

    .biketypes1 {
        background-color: #409eff;
    }

    .biketypes2 {
        background-color: #e8d422;
    }

    .biketypes3 {
        background-color: #ff4040;
    }

    /deep/ .el-drawer.ltr,
    .el-drawer.rtl {
        height: 88%;
        top: 10%;
    }

    /deep/ .el-dialog {
        left: -165px;
    }

    /deep/ .el-dialog__headerbtn {
        top: 0;
    }

    /deep/ .el-dialog__body {
        padding: 0px 20px;
    }


    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .el-divider--vertical {
        height: 2em;
    }

    .el-divider {
        background-color: #f7f8fa;
    }

    .el-divider--horizontal {
        display: block;
        height: 1px;
        width: 100%;
        margin: 5px 0;
    }

    .riding {
        width: 60%;
        border-radius: 20px;
        color: #FFF;
        background-color: #409eff;
        border-color: #409eff;
        margin: 10% 0 0 20%;
    }

    .startpay {
        height: 26%;
        width: 30%;
        border-radius: 20px;
        color: #FFF;
        background-color: #409eff;
        border-color: #409eff;
        margin: 4% 0 0 13%;
        font-size: 17px;
    }

    .riding2 {
        font-size: 18px;
        /* display: inline-block; */
        margin: 0 0 3% 28%;
        width: 45%;
        /* border-radius: 20px; */
        color: #409eff;
        /* background-color: #409eff; */
        /* border-color: #409eff; */
        border-color: #40ffdb;
        background-color: #40ffdb;
        margin: 0 0 5% 27%;
    }

    .riding3 {
        height: 25%;
        display: block;
        width: 60%;
        border-radius: 20px;
        color: #FFF;
        background-color: #409eff;
        border-color: #409eff;
        margin: 0 0 0 21%;
    }

    .bikeType {
        text-align: center;
        width: 70%;
        height: 30%;
        margin-left: 15%;
        line-height: 25px;
        color: #fff;
        margin-top: 10%;
        border-radius: 10px;
    }

    .startTime {
        text-align: center;
        width: 70%;
        height: 30%;
        margin-left: 15%;
        line-height: 25px;
        color: #fff;
        margin-top: 10%;
        border-radius: 10px;
    }

    .backxingxi {
        width: 100px;
        color: rgb(255, 255, 255);
        background-color: #409eff;
        border-radius: 15px;
        display: inline-block;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

    .buttom {
        color: #fff;
        font-size: 12px;
        height: 20%;
        width: 100%;
        margin-top: 5%;
    }

    .center>div {
        width: 100%;
        height: 100%;
    }

    .center {
        margin: 1% 0 1% 0;
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-icon-close {
        cursor: pointer;
    }

    /deep/ .el-descriptions__body {
        color: #606266;
        background-color: #ffffffc2;
    }

    .mapclass {
        border-radius: 10px;
        padding: 10px;
        top: 300px;
        left: 400px;
        width: 25%;
        height: 35%;
        background-color: #40ffdb;
        position: fixed;
        z-index: 99;
    }

    .box {
        height: 100%;
        width: 100%;
    }

    #container {
        border-radius: 10px;
        height: 100%;
        width: 100%;
    }

    /deep/ .BMap_Marker img {
        height: 100% !important;
        width: 100% !important;
    }
</style>